<template>
    <div class="code-edit">
        <codemirror ref="codeMirror" :value="value" :options="cmOptions"></codemirror>
    </div>
</template>

<script>
    import {codemirror} from 'vue-codemirror';
    import 'codemirror/mode/clike/clike';
    import 'codemirror/lib/codemirror';
    import 'codemirror/theme/idea.css';
    import 'codemirror/mode/htmlmixed/htmlmixed';
    import 'codemirror/mode/javascript/javascript';
    import 'codemirror/mode/css/css';
    import 'codemirror/mode/xml/xml';
    import 'codemirror/addon/fold/foldcode';
    import 'codemirror/addon/fold/foldgutter';
    import 'codemirror/addon/fold/foldgutter.css';
    import 'codemirror/addon/fold/brace-fold';
    export default {
        name:"CodeMirror",
        components:{codemirror},
        props:{value:''},
        data() {
            return{
                codemirror:null,
                code:'',
                cmOptions:{
                    autoRefresh:true,
                    value:'',//初始内容
                    mode:'text/x-java',
                    tabSize:4,//tab空格宽度
                    styleActiveLine:true,//光标所在行高亮
                    lineNumbers:true,//显示行号
                    theme:'eclipse',//主题
                    readOnly:false,//是否只读
                    lineWrapping:false,//
                    foldGutter:false,
                    gutters:['CodeMirror-lint-markers','CodeMirror-linenumbers','CodeMirror-foldgutter']
                }
            }
        }
    }
</script>